import React, { useRef } from "react";
import classnames from "classnames";
import { Drawer, Form, Upload, Input, Button } from "antd";
import { PlusOutlined } from '@ant-design/icons';
import { RcFile } from "antd/lib/upload/interface";
import { connect } from "react-redux";
import QRCode from "qrcode.react";
import { IEditorProps } from "store/reducers/editor";
import { nameToComponentMap } from "../EditArea/config";
import { componentParam, transformStyle } from "utils";
import { defaultPageStyle } from "common/data/constants";
import "./index.scss";
import { useState } from "react";


function getBase64(img: RcFile, callback: (result: string) => any) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback((reader.result as string)));
    reader.readAsDataURL(img);
}
interface IPreviewProps {
    visible: boolean;
    onClose: () => void;
    editor: IEditorProps;
    className?: string;
}
const Preview: React.FC<IPreviewProps> = (props) => {
    const { className, onClose, editor } = props;
    const { components } = editor;
    const previewRef = useRef(null);
    const [imgUrl, setImgUrl] = useState("");
    const renderPreview = () => {
        return components.map(item => {
            const comp = Reflect.get(nameToComponentMap, item.name);
            const { styleProps, componentProps } = componentParam(item.props, comp.styleKeyNames);
            const trulyStyle = transformStyle(375, 704, styleProps, defaultPageStyle);
            const Comp = comp.Comp;
            return  <Comp {...item.props} style={trulyStyle} componentProps={componentProps} />
        })
    }
    const handleUpload = (info: any) => {
        if (info.file) {
          getBase64((info.file as RcFile), (imageUrl: string) => setImgUrl(imageUrl));
        }
      };
    return props.visible ? (<div className={classnames("priview-wrapper", className)}>
        <div className="mobile-preview">
            <div className="editor-name">未命名作品</div>
            <div className="main-preview" ref={previewRef}>
                {renderPreview()}
            </div>
        </div>
        <Drawer
            className="preview-drawer"
            title="设置面板"
            placement="right"
            width={400}
            closable={true}
            onClose={onClose}
            visible={true}
        >
            <Form name="setting" labelCol={{span: 6}} wrapperCol={{span: 18}}
                initialValues={{
                    title: "未命名文件",
                    secTitle: "未命名文件"
                }}
            >
                <Form.Item
                    label="扫码预览"
                >
                    <div className="qrcode-wrapper">
                        <QRCode value="www.baidu.com" width={120} height={120} level={"H"} />
                    </div>
                </Form.Item>
                <Form.Item
                    label="封面图片"
                >
                    <Upload
                        name="cover"
                        listType="picture-card"
                        className="cover-upload-btn"
                        showUploadList={false}
                        customRequest={handleUpload}
                    >
                        {imgUrl ? <img src={imgUrl} alt="avatar" style={{ width: '100%' }} /> : <div className="upload-btn">
                            <PlusOutlined className="plus-icon" />
                            <div>封面图片</div>
                        </div>}
                    </Upload>
                </Form.Item>
                <Form.Item
                    label="标题"
                    rules={[{required: true, message: "内容不能为空"}]}
                    name={"title"}
                >
                    <Input placeholder="标题" />
                </Form.Item>
                <Form.Item
                    label="副标题"
                    rules={[{required: true, message: "内容不能为空"}]}
                    name={"secTitle"}
                >
                    <Input placeholder="副标题" />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 6, span: 18 }} className="btn-group">
                    <Button type="primary" htmlType="submit">发布</Button>
                    <Button htmlType="submit">保存</Button>
                    <Button htmlType="submit" onClick={() => onClose()}>取消</Button>
                </Form.Item>
            </Form>
      </Drawer>
    </div>) : null
}

export default connect((state: any) => {
    return {
        editor: state.editor
    }
})(Preview);